<script setup lang="ts">
import { useRoute } from 'vue-router'
import useFetch from '@/hooks/useFetch'
import ExecutionSection from './components/ExecutionSection.vue'
import ApiCustomer from '@/api/customer'

const { query } = useRoute()

// 获取展示信息
const { data, error } = useFetch<{
  intentCustomerInfo: {
    customerName: string
    mobileTelephone: string
    decorationFullAddress: string
  }
  constructionPlanDetail: {
    planStartDate: string
    planFinishDate: string
    realStartDate: string
    realEndDate: string
    constructionProjectName: string
    formConstructionStartPlanPicList: string[]
    formConstructionFinishPlanPicList: string[]
  }
}>(ApiCustomer.getConstructionPlanPageDetail, {
  method: 'POST',
  defaultParams: { constructionPlanId: query.encryptToken },
  // onAfter: (res) => res.constructionPlanDetail,
})

const getImages = (pics?: any[]): string[] => pics?.map((e) => e.picture) || []
</script>

<template>
  <div v-if="!!error" class="h-screen w-full flex items-center justify-center">
    <div>
      <img src="@/assets/svg/expire.svg" class="w-120px" />
      <div class="text-center text-third">分享码已过期</div>
    </div>
  </div>

  <template v-else>
    <div class="py-3 px-5 bg-white shadow rounded-b-xl">
      <div class="font-bold">
        {{ data?.intentCustomerInfo?.customerName }}（{{ data?.intentCustomerInfo.mobileTelephone }}）
      </div>
      <div class="my-2 text-sm text-#999">
        地址：{{ data?.intentCustomerInfo?.decorationFullAddress }}
      </div>
      <div class="mt-3 border-t pt-3">
        施工阶段：<span class="font-bold">{{
          data?.constructionPlanDetail.constructionProjectName
        }}</span>
      </div>
    </div>

    <ExecutionSection
      title="开工"
      :plan-date="data?.constructionPlanDetail.planStartDate"
      :real-date="data?.constructionPlanDetail.realStartDate"
      :images="getImages(data?.constructionPlanDetail.formConstructionStartPlanPicList)"
    />

    <ExecutionSection
      title="完工"
      :plan-date="data?.constructionPlanDetail.planFinishDate"
      :real-date="data?.constructionPlanDetail.realEndDate"
      :images="getImages(data?.constructionPlanDetail.formConstructionFinishPlanPicList)"
    />
  </template>
</template>
